<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理系统 - 深蓝主题</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            color: #555;
            overflow-x: hidden;
        }

        .app-container {
            display: flex;
            min-height: 100vh;
        }

        /* 侧边栏样式 - 深蓝色 */
        .sidebar {
            width: 220px;
            height: 100vh;
            background: linear-gradient(135deg, #1a3a8f, #0d1b4a);
            color: white;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s;
            position: relative;
            z-index: 10;
        }

        .sidebar-header {
            padding: 20px;
            text-align: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .sidebar-header h2 {
            font-size: 1.3rem;
            margin-bottom: 5px;
            color: #fff;
        }

        .sidebar-header p {
            font-size: 0.8rem;
            opacity: 0.8;
            color: #a8c6ff;
        }

        .menu {
            padding: 15px 0;
        }

        .menu-item {
            position: relative;
        }

        .menu-item > a {
            display: block;
            padding: 12px 20px;
            color: #d6e4ff;
            text-decoration: none;
            transition: all 0.3s;
            font-size: 0.95rem;
        }

        .menu-item > a:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        .menu-item.active > a {
            background-color: rgba(255, 255, 255, 0.2);
            color: #fff;
        }

        .menu-item.has-child > a:after {
            content: '▾';
            float: right;
            transition: transform 0.3s;
            color: #a8c6ff;
        }

        .menu-item.has-child.open > a:after {
            transform: rotate(180deg);
        }

        .submenu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
            background-color: rgba(0, 0, 0, 0.1);
        }

        .menu-item.open .submenu {
            max-height: 500px;
        }

        .submenu a {
            display: block;
            padding: 10px 20px 10px 35px;
            color: rgba(214, 228, 255, 0.9);
            text-decoration: none;
            font-size: 0.9rem;
            transition: all 0.2s;
        }

        .submenu a:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: white;
        }

        /* 主内容区域 - 浅蓝色背景 */
        .main-content {
            flex: 1;
            padding: 20px;
            background-color: #f0f5ff;
        }

        .content-header {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #c7d8ff;
        }

        .content-header h1 {
            color: #1a3a8f;
            font-size: 1.8rem;
        }

        .content-body {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(26, 58, 143, 0.1);
            min-height: calc(100vh - 120px);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .sidebar {
                width: 70px;
                overflow: hidden;
            }

            .sidebar-header h2, .sidebar-header p {
                display: none;
            }

            .menu-item > a span {
                display: none;
            }

            .menu-item > a:after {
                display: none;
            }

            .menu-item > a {
                text-align: center;
                padding: 15px 0;
            }

            .submenu a {
                padding-left: 20px;
            }
        }
        /* 退出登录按钮样式 */
        .logout-btn {
            position: fixed; /* 固定定位 */
            right: 20px;    /* 距离底部 20px */
            top: 20px;     /* 距离右侧 20px */
            padding: 10px 20px;
            background: #1a3a8f;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            z-index: 1000;   /* 确保它在其他元素之上 */
        }

        .logout-btn:hover {
            background-color: rgb(17, 29, 89);
            color: #fff;
        }

        .logout-btn i {
            margin-right: 10px;
            font-size: 1.1rem;
        }
    </style>
</head>
<body>
<div class="app-container">
    <!-- 侧边栏 -->
    <div class="sidebar">
        <div class="sidebar-header">
            <h2>管理系统</h2>
            <p>深蓝主题</p>
        </div>
        <div class="menu" id="menuContainer">
            <!-- 菜单将通过JavaScript动态生成 -->
        </div>
        <button class="logout-btn" onclick="logout()">
            退出登录
        </button>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
        <div class="content-header">
            <h1 id="pageTitle">欢迎使用管理系统</h1>
        </div>
        <div class="content-body" id="contentBody">
            <p>请从左侧菜单选择功能</p>
            <!-- 内容将通过JavaScript动态加载 -->
        </div>
    </div>
</div>

<script>
    function logout() {
        // 跳转到 login.html
        window.location.href = "login.html";
    }
    $(document).ready(function() {
        // 加载菜单
        loadMenu();

        // 默认加载首页
        loadContent('welcome', '欢迎页');
    });

    // 加载菜单数据
    function loadMenu() {
        $.ajax({
            url: '/sysMenu/getAllMenu',
            type: 'GET',
            success: function(response) {
                // console.log(response)
                if (response.code === '200' && response.data) {
                    // console.log(response.data)
                    renderMenu(response.data);
                } else {
                    console.error('获取菜单失败:', response.message);
                }
            },
            error: function(xhr, status, error) {
                console.error('获取菜单出错:', error);
            }
        });
    }

    // 渲染菜单
    function renderMenu(menuData) {
        const menuContainer = $('#menuContainer');
        menuContainer.empty();

        // 先找出所有父菜单
        const parentMenus = menuData.filter(menu => menu.parentId === 0);

        parentMenus.forEach(parentMenu => {
            // 找出所有子菜单
            const childMenus = menuData.filter(menu => menu.parentId === parentMenu.menuId);

            const hasChildren = childMenus.length > 0;
            const menuItemClass = hasChildren ? 'menu-item has-child' : 'menu-item';

            const menuItem = $(`
                    <div class="${menuItemClass}">
                        <a href="javascript:void(0)" data-id="${parentMenu.menuId}"
                           data-url="${parentMenu.menuUrl || '#'}"
                           data-name="${parentMenu.menuName}">
                            <i class="icon"></i>
                            <span>${parentMenu.menuName}</span>
                        </a>
                        ${hasChildren ? '<div class="submenu"></div>' : ''}
                    </div>
                `);

            menuContainer.append(menuItem);

            // 添加子菜单
            if (hasChildren) {
                const submenu = menuItem.find('.submenu');
                childMenus.forEach(childMenu => {
                    submenu.append(`
                            <a href="javascript:void(0)" data-id="${childMenu.menuId}"
                               data-url="${childMenu.menuUrl || '#'}"
                               data-name="${childMenu.menuName}">
                                ${childMenu.menuName}
                            </a>
                        `);
                });

                // 父菜单点击事件 - 展开/收起子菜单
                menuItem.find('> a').click(function(e) {
                    e.preventDefault();
                    menuItem.toggleClass('open');

                    // 如果没有子菜单链接，则加载父菜单内容
                    if (!parentMenu.menuUrl) {
                        loadContent(parentMenu.menuId, parentMenu.menuName);
                    }
                });
            } else {
                // 没有子菜单的点击事件
                menuItem.find('a').click(function(e) {
                    e.preventDefault();
                    const menuId = $(this).data('id');
                    const menuName = $(this).data('name');
                    const menuUrl = $(this).data('url');

                    if (menuUrl && menuUrl !== '#') {
                        loadContent(menuUrl, menuName);
                    } else {
                        loadContent(menuId, menuName);
                    }

                    // 设置活动菜单项
                    $('.menu-item').removeClass('active');
                    menuItem.addClass('active');
                });
            }

            // 子菜单点击事件
            menuItem.find('.submenu a').click(function(e) {
                e.preventDefault();
                const menuId = $(this).data('id');
                const menuName = $(this).data('name');
                const menuUrl = $(this).data('url');

                if (menuUrl && menuUrl !== '#') {
                    loadContent(menuUrl, menuName);
                } else {
                    loadContent(menuId, menuName);
                }

                // 设置活动菜单项
                $('.menu-item').removeClass('active');
                menuItem.addClass('active');
            });
        });
    }

    // 加载内容
    function loadContent(url, title) {
        $('#pageTitle').text(title || '无标题');

        if (url === 'welcome') {
            $('#contentBody').html(`
                    <h2>欢迎使用管理系统</h2>
                    <p>这是一个深蓝主题的管理系统界面。</p>
                    <p>请从左侧菜单选择您需要的功能。</p>
                    <style>
                        #contentBody {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            height: 70vh;
                            text-align: center;
                        }
                        #contentBody h2 {
                            color: #1a3a8f;
                            margin-bottom: 20px;
                        }
                        #contentBody p {
                            margin-bottom: 10px;
                            color: #666;
                        }
                    </style>
                `);
            return;
        }

        // 显示加载中
        $('#contentBody').html('<div style="text-align:center;padding:50px;">加载中...</div>');


        $.ajax({
            url: url,
            type: 'GET',
            success: function(response) {
                $('#contentBody').html(response);
            },
            error: function() {
                $('#contentBody').html('<p>加载内容失败</p>');
            }
        });
    }
</script>
</body>
</html>